<template>
	<view class="">
		<view class="bg_fff opacity_3 W_100vw H_100vh absoluteTL flex_colC z_index_1000" v-if="isShow">
			<image class="WH_10vw" src="../../static/loading.png" mode=""></image>
		</view>
		<view class="P_2 top">
			<swiper style="width: 95vw;height: 50vw;" class="swiper" :indicator-dots="true" :autoplay="autoplay"
				:interval="interval" :duration="duration" :circular='true'>
				<swiper-item v-for="(item,i) in banner" :key='i'>
					<image class="B_radius_5" style="width: 95vw;height: 50vw;" :src="baseImg+item.img" mode=""></image>
				</swiper-item>
			</swiper>
		</view>


		<view @click="uOpenWin('./noticeList')" class="MB_2 bg_fff PLR_3 flex_row_between PTB_1">
			<view class="flex_rowL">
				<image class="W_4vw" src="../../static/sound.png" mode="widthFix"></image>
				<view class="W_60vw H_10vw">
					<swiper style="height: 10vw;" class="swiper PL_2" :vertical='true' :circular='true'
						:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item class="text_overflow_1 W_60vw" v-for="(item,i) in advanceListTwo" :key='i'
							style="line-height: 10vw;display: flex;align-items: center;">
							<view v-html="item.title" class="">

							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<image class="W_4vw" src="../../static/goyou.png" mode="widthFix"></image>


			<!-- <uni-notice-bar single="true" text="adfasfdsfd"></uni-notice-bar> -->
			<!-- <lwNotice :showScale="true" @itemClick="uOpenWin('./noticeList')" :list="advanceListTwo"></lwNotice> -->
		</view>


		<view class="MTB_2 PTB_4 bg_fff flex_row_around">
			<view class="flex_colC" @click="uOpenWin('../mine/share')">
				<image class="W_10vw" src="../../static/tab0_invite.png" mode="widthFix"></image>
				<view class="PT_2">
					会员邀请
				</view>
			</view>
			<view class="flex_colC" @click="uOpenWin('../mine/cashIn')">
				<image class="W_10vw" src="../../static/tab0_cashIn.png" mode="widthFix"></image>
				<view class="PT_2">
					充值余额
				</view>
			</view>
			<view class="flex_colC" @click="uOpenWin('../mine/cashOut')">
				<image class="W_10vw" src="../../static/tab0_cashOut.png" mode="widthFix"></image>
				<view class="PT_2">
					余额提现
				</view>
			</view>
			<view class="flex_colC" @click="uOpenWin('../mine/kefu')">
				<image class="W_10vw" src="../../static/tab0_service.png" mode="widthFix"></image>
				<view class="PT_2">
					在线客服
				</view>
			</view>
		</view>


		<view class="P_2 bg_fff flex_row_between MB_2 text-center">
			<view>
				<view class="flex_rowL padding-tb-3">
					<view class="fontS_16">
						{{drawerList[0].name}}/USDT
					</view>
					
				</view>
				<view :class="drawerList[0].rate>0?'color_up':'color_down'"
					class="font_weight_bold fontS_16 padding-tb-3">
					${{drawerList[0].close}}
				</view>
				<view :class="drawerList[0].rate>0?'color_up':'color_down'"
					class="PL_1 PTB_1 B_radius_5 color_fff fontS_12 padding-tb-3">
					{{drawerList[0].rate>0?'+':''}}{{drawerList[0].rate}}%
				</view>
			</view>
			<view class="">
				<view class="flex_rowL padding-tb-3">
					<view class="fontS_16">
						{{drawerList[1].name}}/USDT
					</view>
				</view>
				<view :class="drawerList[1].rate>0?'color_up':'color_down'"
					class="font_weight_bold fontS_16 padding-tb-3">
					${{drawerList[1].close}}
				</view>
				<view :class="drawerList[1].rate>0?'color_up':'color_down'"
					class="PL_1 PTB_1 B_radius_5 color_fff fontS_12 padding-tb-3">
					{{drawerList[1].rate>0?'+':''}}{{drawerList[1].rate}}%
				</view>
			</view>
			<view class="">
				<view class="flex_rowL padding-tb-3">
					<view class="fontS_16">
						{{drawerList[3].name}}/USDT
					</view>
				</view>
				<view :class="drawerList[3].rate>0?'color_up':'color_down'"
					class="font_weight_bold fontS_16 padding-tb-3">
					${{drawerList[3].close}}
				</view>
				<view :class="drawerList[3].rate>0?'color_up':'color_down'"
					class="PL_1 PTB_1 B_radius_5 color_fff fontS_12 padding-tb-3">
					{{drawerList[3].rate>0?'+':''}}{{drawerList[3].rate}}%
				</view>
			</view>
		</view>

		<!-- 	<view class="P_2 flex_rowL bg_fff">
			<image class="WH_4vw" src="../../static/tab1_ph.png" mode=""></image>
			<view class="pub_color font_weight_bold PL_2">
				撮合排行榜
			</view>
		</view> -->

		<!-- <view class="flex_row_around PTB_2 bg_fff PB_6 color_gray fontS_10">
			<view class="flex_colC">
				<image class="W_12vw" src="../../static/tab1_first.png" mode="widthFix"></image>
				<view class="flex_rowL">
					<image class="WH_6vw B_radius_circle" :src="baseImg + (rank[0].user && rank[0].user.avatar)" mode=""></image>
					<view class="PL_1">
						{{rank[0].user && rank[0].user.name}}
					</view>
					
				</view>
				
			</view>
			
			<view class="flex_colC">
				<image class="W_12vw" src="../../static/tab1_third.png" mode="widthFix"></image>
				<view class="flex_rowL">
					<image class="WH_6vw B_radius_circle" :src="baseImg + (rank[1].user && rank[1].user.avatar)" mode=""></image>
					<view class="PL_1">
						{{rank[1].user && rank[1].user.name}}
					</view>
					
				</view>
			</view>
			<view class="flex_colC">
				<image class="W_12vw" src="../../static/tab1_second.png" mode="widthFix"></image>
				<view class="flex_rowL">
					<image class="WH_6vw B_radius_circle" :src="baseImg + (rank[2].user && rank[2].user.avatar)" mode=""></image>
					<view class="PL_1">
						{{rank[2].user && rank[2].user.name}}
					</view>
					
				</view>
			</view>
			
			
			
		</view> -->

		<!-- <view class="flex_row_between P_2">
			<view class="bg_index1 PL_2 B_radius_5 color_fff H_22vw W_46vw">
				<view class="fontS_14 font_weight_bold PT_3">
					新人课堂
				</view>
				
			</view>
			<view class="bg_index2 PL_2 B_radius_5 color_fff H_22vw W_46vw">
				<view class="fontS_14 font_weight_bold PT_3">
					矿池
				</view>
				
			</view>
		</view> -->

		<view class="flex_rowL pub_color font_weight_bold bg_fff P_2">
			<view @click="idx=0" :class="idx==0?'tab_ac':''" class="PT_2 PB_1 fontS_16">
				USDT
			</view>
			<!-- <view @click="idx=1" :class="idx==1?'tab_ac':''" class="PT_2 PB_1 ML_4">
				成绩额榜
			</view> -->
		</view>
		<view class="bg_fff P_2">
			<view class="flex_row_between PTB_2 color_gray fontS_12">
				<view class="W_45vw">
					现货
				</view>
				<view class="flex_row_between W_50vw">
					<view class="">
						最新价
					</view>
					<view class="">
						涨跌幅
					</view>
				</view>
			</view>
			<!-- @click="uOpenWin('../hangqing/hqDet?code='+item.code+'&id='+item.id)" 添加到下方即可到二级页面 -->
			<view class="flex_row_between PTB_2" v-for="(item,i) in drawerList" :key='i'
				v-if="item.name!='USDT'">
				<view class="W_45vw" v-if="item.name!='USDT'">
					<view class="flex_rowL color_gray">
						<view class="font_weight_bold fontS_16 color_000">
							{{item.name}}
						</view>
						<view class="font_weight_bold fontS_16 color_000">
							/USDT
						</view>
					</view>
					<!-- <view class="flex_rowL fontS_12 color_gray">
						<view class="">
							24H量
						</view>
						<view class="PL_1">
							{{(item.num/10000).toFixed(2)}}万
						</view>
					</view> -->
				</view>
				<view class="flex_row_between W_50vw" v-if="item.name!='USDT'">
					<view class="">
						<view class="font_weight_bold color_gray">
							{{item.close}}
						</view>
						<!-- <view class="color_gray fontS_10">
							￥{{(item.close*rate).toFixed(2)}}
						</view> -->
					</view>
					<view :class="item.rate>0?'bg_red':'bg_green'"
						class="W_20vw textC PTB_1 B_radius_5 color_fff fontS_14 font_weight_bold">
						{{item.rate>0?'+':''}}{{item.rate}}%
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import aLoading from"../../components/aLoading/aLoading.vue"
	// import lwNotice from '../../components/lw-notice/lw-notice.vue'
	export default {
		// components:{aLoading},
		data() {
			return {
				idx: 0,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				banner: [],
				advanceListTwo: [],
				drawerList: [],
				currentItem: {},
				icon: '',
				iconName: '',
				moreNum: '',
				rate: '',
				rank: [],
				notice: '',
				isShow: true,
			}
		},
		onLoad() {
			this.getPage()
			this.getBilist()
			this.getRate()
			this.update()
			this.transShow()
		},
		onPullDownRefresh() {
			this.update()
			this.getBilist()
			this.getRate()
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			transShow() {
				let _this = this;
				if (this.isShow) {
					setTimeout(() => {
						_this.isShow = false;
					}, 1500)
				}
			},
			doUpData(url) {
				uni.showLoading({
					title: '更新中,请勿进行其他操作……'
				})
				uni.downloadFile({ //执行下载
					url: url, //下载地址
					success: downloadResult => { //下载成功
						uni.hideLoading();
						if (downloadResult.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '更新成功，确定现在重启吗？',
								confirmText: '重启',
								confirmColor: '#EE8F57',
								success: function(res) {
									if (res.confirm == true) {
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true
											},
											function(res) {
												utils.showToast('更新成功，重启中');
												plus.runtime.restart();
											}
										);
									}
								}
							});
						}
					}
				});
			},
			update() {
				let _this = this;
				this.$req('index/version', {
					scene: 0
				}, function(res) {
					if (res.code == 1) {
						let url = res.data.url;
						plus.runtime.getProperty(plus.runtime.appid, function(inf) {
							console.log(res.data.num + inf.version)
							if (inf.version != res.data.num) {
								uni.showModal({
									title: "发现新版本",
									content: "确认下载更新",
									success: (res) => {
										if (res.confirm == true) { //当用户确定更新，执行更新
											_this.doUpData(url);
										}
									}
								})
							}
						});
					}
				})
			},
			getRate() {
				let _this = this;
				this.$req('index/getRate', {}, function(res) {
					_this.rate = res.data.rate
					//console.log(res)
				})
			},
			getBilist() {
				let _this = this;
				this.$req('currency/index', {}, function(res) {
					let list = res.data;
					let arr = [];
					list.forEach((item, i) => {
						if (item.code != 'ksa') {
							_this.drawerList.push({
								name: item.name,
								code: item.code,
								num: '',
								low: '',
								high: '',
								open: '',
								close: '',
								rate: '',
								id: item.id
							})
						}

					});
					//console.log(_this.icon)
					if (!_this.icon) {
						_this.icon = _this.drawerList[0].code;
						_this.iconName = _this.drawerList[0].name;
					}

					_this.drawerList.forEach((item, i) => {
						if (item.code != 'ksa' && item.code != 'usdt') {
							_this.getNum(item.code + 'usdt', i)
						}

					})
				})
			},
			getNum(key, i) {
				let _this = this;
				this.$req('huobi/merged', {
					symbol: key
				}, function(res) {
					_this.drawerList[i].num = res.data.amount;
					_this.drawerList[i].low = res.data.low;
					_this.drawerList[i].high = res.data.high;
					_this.drawerList[i].close = res.data.close;
					_this.drawerList[i].open = res.data.open;
					_this.drawerList[i].rate =
						((res.data.close - res.data.open) / res.data.open * 100).toFixed(2);
				})
				console.log(this.currentItem)

				if (!this.currentItem.code) {
					this.currentItem = _this.drawerList[0];
				}

			},
			getPage() {
				let _this = this;
				this.$req('index/index', {}, function(res) {
					console.log(res)
					_this.banner = res.data.banner;
					_this.advanceListTwo = res.data.notice;
					_this.rank = res.data.rankList;

				})
			}
		}
	}
</script>

<style>
	.top {
		padding-top: var(--status-bar-height);
	}

	.tab_ac {
		border-bottom: 2px solid #4e5ac6;
	}

	.bg_index1 {
		background-image: url(../../static/index_bg1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.bg_index2 {
		background-image: url(../../static/index_bg2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.padding-tb-3 {
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.MTB_2 {
		margin-top: -2.66667vw;
	}
</style>
